<template>
  <a-drawer
    :title="title"
    :maskClosable="true"
    :width="drawerWidth"
    placement="right"
    :closable="true"
    @close="handleCancel"
    :visible="visible"
    style="height: calc(100% - 55px);overflow: auto;padding-bottom: 53px;">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="机构名称">
          <j-select-depart v-decorator="['office', validatorRules.office]"/>
          <!--            <a-input placeholder="请输入机构名称" v-decorator="[ 'office', validatorRules.office]" />-->
        </a-form-item>
        <a-row :gutter="24">
          <a-col :md="8">
            <a-form-item
              :labelCol="labelRow"
              :wrapperCol="wrapperRow"
              label="服务器名称">
              <j-dict-select-tag :triggerChange="true" ref="serverName" placeholder="请选择服务器名称" dictCode="jinan_server_expense,server_name,id" v-decorator="[ 'serverName', validatorRules.serverName]":disabled="auditStatus == '1'||auditStatus == '2'||auditStatus=='3'"/>
              <!--          <a-input placeholder="服务器名称"  v-decorator="[ 'serverName', validatorRules.serverName]" />-->
            </a-form-item>
          </a-col>
          <a-col :md="8">
            <a-form-item
            :labelCol="labelRow"
            :wrapperCol="wrapperRow"
            label="操作系统">
            <j-dict-select-tag :triggerChange="true" dictCode="os"   placeholder="请选择操作系统" v-decorator="['os', validatorRules.os]":disabled="auditStatus == '1'||auditStatus == '2'||auditStatus=='3'"/>
            <!--          <a-input placeholder="请输入操作系统" v-decorator="[ 'os', validatorRules.os]" />-->
          </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :md="8">
            <a-form-item
              :labelCol="labelRow"
              :wrapperCol="wrapperRow"
              label="申请ip">
              <a-input ref="ips" placeholder="多个Ip逗号分隔"  v-decorator="[ 'ip', validatorRules.ip]" :disabled="auditStatus == '1'||auditStatus == '2'||auditStatus=='3'"/>
            </a-form-item>
          </a-col>
          <a-col :md="8">
            <a-form-item
              :labelCol="labelRow"
              :wrapperCol="wrapperRow"
              label="申请端口">
              <a-input placeholder="申请端口"  v-decorator="[ 'openPorts', validatorRules.openPorts]" :disabled="auditStatus == '1'||auditStatus == '2'||auditStatus=='3'"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :md="8">
            <a-form-item
              :labelCol="labelRow"
              :wrapperCol="wrapperRow"
              label="申请人">
              <a-input placeholder="申请人"  v-decorator="[ 'applyUser', validatorRules.applyUser]":disabled="auditStatus == '1'||auditStatus == '2'||auditStatus=='3'" />
            </a-form-item>
          </a-col>
          <a-col :md="8">
            <a-form-item
              :labelCol="labelRow"
              :wrapperCol="wrapperRow"
              label="联系电话">
              <a-input placeholder="联系电话"  v-decorator="[ 'applyUserPhone', validatorRules.applyUserPhone]" :disabled="auditStatus == '1'||auditStatus == '2'||auditStatus=='3'"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row  :gutter="24">
          <a-col :md="8">
            <a-form-item
              :labelCol="labelRow"
              :wrapperCol="wrapperRow"
              label="费用">
              <a-input  ref="money" placeholder="费用" disabled="disabled" v-model="money" />
            </a-form-item>
          </a-col>
            <a-col :md="8">
              <a-button type="primary"  @click="billing">计费</a-button>
            </a-col>

        </a-row>
        <a-col :md="8">
          <a-form-item
            :labelCol="labelRow"
            :wrapperCol="wrapperRow"
            label="数据库名称">
            <j-dict-select-tag :triggerChange="true" ref="dataBaseName" placeholder="请选择服务器名称" dictCode="jinan_data_base,dataBase_name,id" v-decorator="[ 'dataBaseName', validatorRules.dataBaseName]":disabled="auditStatus == '1'||auditStatus == '2'||auditStatus=='3'"/>
            <!--          <a-input placeholder="服务器名称"  v-decorator="[ 'serverName', validatorRules.serverName]" />-->
          </a-form-item>
        </a-col>
<!--        <a-row :gutter="24">-->
<!--          <a-col :md="8">-->
<!--            <a-form-item-->
<!--              :labelCol="labelRow"-->
<!--              :wrapperCol="wrapperRow"-->
<!--              label="费用">-->
<!--              <a-input ref="cost" placeholder="费用" disabled="disabled"  v-decorator="[ 'cost', validatorRules.cost]" />-->
<!--            </a-form-item>-->
<!--          </a-col>-->
<!--          <a-col :md="8">-->
<!--            <a-button type="primary"  @click="billing">计费</a-button>-->
<!--          </a-col>-->
<!--        </a-row>-->
      </a-form>
    </a-spin>
    <div class="drawer-bootom-button" v-show="!disableSubmit">
      <div v-if=" auditStatus == '1'||auditStatus == '2'|| auditStatus == '3'" >
        <a-button key="back" @click="handleCancel">返回</a-button>
      </div>
      <div v-else>
        <a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
          <a-button style="margin-right: .8rem">返回</a-button>
        </a-popconfirm>
        <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">保存</a-button>
      </div>
    </div>
  </a-drawer>
</template>

<script>
  import pick from 'lodash.pick'
  import {saveServerApplyList,editServerApplyList } from '@/api/api'
  import JMultiSelectTag from '@/components/dict/JMultiSelectTag'
  import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
  import {getAnnualPrice} from '@/utils/ipDate'
  import {getServerExpense1} from '@/utils/ipDate'
  import {getDataBaseName} from '@/utils/ipDate'
  export default {
    components: {
      JMultiSelectTag,
      JSelectDepart
    },
    name: "cloudServicesApplyModel",
    data(){
      return{
        auditStatus:"",
        money:'',
        form: this.$form.createForm(this),
        title:"操作",
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 2 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 14 },
        },
        labelRow: {
          xs: { span: 14 },
          sm: { span: 6 },
        },
        wrapperRow: {
          xs: { span: 15 },
          sm: { span: 18 },
        },
        dis:false,
        hiding:true,
        drawerWidth:1000,
        confirmLoading: false,
        disableSubmit:false,
        validatorRules:{
          // principalPhone:{rules: [{validator: this.validatePhone}]},
          applyUserPhone:{rules: [{validator: this.validatePhone}]},
          // principalMail:{rules: [{validator: this.validateEmail}]},
          // linkmanMail:{rules: [{validator: this.validateEmail}]},
          // memory:{rules: [{validator: this.validateNum}]},
          // expense:{rules: [{validator: this.expense}]},
        },
        url: {
          getServerExpense: "/jinan/serviceApply/getServerExpense",
        },
      }
    },
    methods:{
      async billing(){
        let date = null;
        let sum = 0;
          if(this.$refs.ips.value!=undefined && this.$refs.ips.value!=''){//ip费用
            sum += await getAnnualPrice(this.$refs.ips.value.split(",").length,date);
          }
          if(this.$refs.serverName.value!=undefined && this.$refs.serverName.value!=''){//服务器费用
            let serverName=this.$refs.serverName.value;
            sum= parseFloat((sum+ await getDataBaseName(dataBaseName,date)).toFixed(2));
          }
        if(this.$refs.dataBaseName.value!=undefined && this.$refs.dataBaseName.value!='') {//
          let dataBaseName=this.$refs.dataBaseName.value;
          sum= parseFloat((sum+ await getDataBaseName(dataBaseName,date)).toFixed(2));
        }
          this.$refs.money.$refs.input.value = sum;
          this.sumbit = true;
      },
      validatePhone(rule, value, callback){
        if(!value){
          callback()
        }else{
          if(new RegExp(/^1[3|4|5|7|8][0-9]\d{8}$/).test(value)){
            callback()
          }else{
            callback("请输入正确格式的手机号码!");
          }
        }
      },
      close () {
        this.$emit('close');
        this.visible = false;
        this.disableSubmit = false;
      },
      add () {
        this.edit({});
      },
      edit(record){
        this.money=record.money;
        this.auditStatus=record.auditStatus;
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model,'office','os', 'serverName','ip','openPorts','applyUser','applyUserPhone','auditStatus','money' ))
        });
      },
      handleCancel () {
        this.close()
      },
      handleSubmit () {
        const that = this;
        let status='1';
        let money={money: this.$refs.money.$refs.input.value}
        let auditStatus={auditStatus:status};
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true;

            let formData = Object.assign(this.model, values,auditStatus,money);

            let obj;

            if(!this.model.id){
              obj=saveServerApplyList(formData);
            }else{
              obj=editServerApplyList(formData);
            }
            obj.then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;

              that.close();
            })

          }
        })
      },
      handleCancel () {
        this.visible = false
        this.$emit('cancel')
      },
    }
  }
</script>

<style scoped>

</style>